<template>
	<view class="container">
		<Navbar fixed />
		<view class="setting">
			<view class="setting-line right-arrow" @click="chooseAvatar">
				<image class="avatar" :src="userInfo.avatar? userInfo.avatar : '/static/logo.png'" />
			</view>
			<view class="setting-line">
				<text class="label">Username</text>
				<text class="content">{{userInfo.username}}</text>
			</view>
			<view class="setting-line">
				<text class="label">Biography</text>
				<text class="content">My name is Elainooo.</text>
			</view>
			<view class="setting-line right-arrow" @click="goPassword">
				<text class="label">Change your password</text>
			</view>
		</view>
	</view>
</template>

<script setup name="setting">
	import {
		navigateTo
	} from '@/utils';
	import Navbar from '@/components/Navbar/Navbar.vue'
	import useUserStore from '@/store/user';
	import {
		storeToRefs
	} from 'pinia'
	import {
		updateAvatar
	} from "@/api/user.js"

	const {
		userInfo
	} = storeToRefs(useUserStore())

	const goPassword = () => {
		navigateTo('/pages/profile/setting/password')
	}

	const chooseAvatar = async () => {
		const files = await new Promise((resolve, reject) => {
			uni.chooseImage({
				count: 1, // 选择一张图片
				extension: ['png', 'jpg', 'jpeg'], // 图片格式限定
				sourceType: ['album'], // 仅从相册选择
				success: async (res) => {
					console.log('tempFilePaths-->', res);
					userInfo.value.avatar = res.tempFilePaths[0]; // 设置头像路径
					// const uploadRes = await uploadFile(res.tempFiles)
					// console.log("res-->", uploadRes)
					resolve(res.tempFiles);
				},
				fail: (err) => {
					console.log('err-->', err);
					hasAvatar.value = false; // 选择失败时清除头像标记
					reject(err);
				},
			});
		});
		updateAvatar(files[0])
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 84rpx 46rpx;
	}

	.setting {
		width: 100%;

		&-line {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&+.setting-line {
				margin: 40rpx 0;
			}

			.avatar {
				width: 146rpx;
				height: 146rpx;
				border-radius: 50%;
			}

			.label {
				color: rgba(255, 255, 255, 0.7);
				text-align: left;
				font-family: "PINGFANG-MEDIUM";
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: -0.56rpx;
				padding-left: 20rpx;
				flex: none;
			}

			.content {
				color: #ffffff;
				text-align: right;
				font-family: "PINGFANG-MEDIUM";
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}
</style>